<script setup lang="ts">
import { ref } from 'vue'
import { useStore } from '@store/index';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';
import { getFollowInfo } from '@utils/api'
import { FollowDto } from '@/type';
const store = useStore()
const router = useRouter()
const BASEURL = store.getBaseUrl()
const userId = storeToRefs(store).getUserId
const followInfoList = ref<FollowDto[]>([])
/**
 * Todo 修改这里获取全部关注人的逻辑
 */
getFollowInfo(userId.value, 1).then((res) => {
    followInfoList.value = res.data.data.list
})
const toSingerPage = (id: string) => {
    router.push({
        name: 'singer', params: { id }
    })
}
</script>
<template>
    <div class="content">
        <div class="title">
            <h2>我的歌手({{ followInfoList.length }})</h2>
        </div>
        <div class="singerList">
            <ul>
                <li class="item" v-for="follow of followInfoList" @click="toSingerPage(follow.user.id)">
                    <img class="singerAvatar" :src="BASEURL + '/static/image/' + follow.user.avatar">
                    <div class="singerInfo">
                        <p class="singerName">{{ follow.user.name }}</p>
                        <p class="cd">专辑:{{ 12 }} 单曲:{{ 114 }}</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<style scoped lang="css">
.cd {
    font-size: 12px;
    color: #666;
}

.singerList .singerAvatar {
    height: var(--singer-avatar-size);
    width: var(--singer-avatar-size);
}

.singerInfo {
    height: var(--singer-avatar-size);
    margin-left: 15px;
    display: flex;
    flex-direction: column;
}

.singerInfo p {
    margin-top: 0;
    margin-bottom: 0;
}

.singerName {
    font-weight: 600;
    margin-top: 8px !important;
    margin-bottom: 10px !important;
}

.singerList .item {
    display: flex;
    cursor: pointer;
}

.singerList li {
    list-style: none;
    padding: 5px 0;
    border-bottom: 1px solid #d5d5d5;
}

.singerList ul {
    padding-left: 0;
}

.title h2 {
    font-weight: normal;
    margin-bottom: 10px
}

.content {
    display: flex;
    flex-direction: column;
}

.title {
    flex: 1;
    border-bottom: 2px solid var(--red-style)
}
</style>